<template>
  <div>
    <el-row :gutter="20" style="margin-top:10px;">
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>个人信息</span>
            </div>
            <div class="name-role">
              <span class="sender">姓名 - {{ userInfo.name }}</span>
            </div>
            <div class="register-info">
          <span class="register-info">
            注册时间：<li class="fa fa-clock-o"></li>
             {{ userInfo.createTime }}
          </span>
            </div>
            <el-divider></el-divider>
            <div class="personal-relation">
              <div class="relation-item">手机号:
                <div style="float: right; padding-right:20px;">{{ userInfo.phone }}</div>
              </div>
            </div>
            <div class="personal-relation">
              <div class="relation-item">个人邮箱:
                <div style="float: right; padding-right:20px;">{{ userInfo.mail }}</div>
              </div>
            </div>
            <div class="personal-relation">
              <div class="relation-item">排班日期:
                <div style="float: right; padding-right:20px;">2023-03-25</div>
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="grid-content bg-purple">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>基本资料</span>
            </div>
            <div>
              <el-form :disabled="isDis" label-width="80px" v-model="userInfo" size="small" label-position="right">
                <el-form-item label="姓名" prop="name">
                  <el-input auto-complete="off" v-model="userInfo.name"></el-input>
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                  <el-input auto-complete="off" v-model="userInfo.age"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="gender">
                  <el-select style="width: 100%"  v-model="userInfo.gender">
                    <el-option  label="女" value="1"></el-option>
                    <el-option  label="男" value="2"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                  <el-input  auto-complete="off" v-model="userInfo.phone"></el-input>
                </el-form-item>
                <el-form-item label="个人邮箱" prop="homeUrl">
                  <el-input maxlength="18" v-model="userInfo.mail"></el-input>
                </el-form-item>
                <el-form-item label="详细地址" prop="homeUrl">
                  <el-input maxlength="18" v-model="userInfo.address"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button v-if="isDis" size="mini" @click="isDisabled" type="primary">修改</el-button>
                <el-button v-else size="mini" type="primary" @click="onSubmit">提交</el-button>
                <el-button size="mini" @click="cancel" type="warning">取消</el-button>
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "UserInfo",
  data() {
    return {
      userInfo: {
        homeUrl: 'http://eepc.hhang.xyz',
        gender:'',

      },
      options: [{
        value: '1',
        label: '女'
      }, {
        value: '2',
        label: '男'
      }],
      isDis: true
    }

  },
  mounted() {
    this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"))
  },
  methods: {
    isDisabled(){
      this.isDis = false
    },
    cancel(){
      this.isDis = true
    },
    onSubmit(){
      console.log(this.userInfo)
      this.$axios.post('/api/user/upUser', this.userInfo).then(res => {
        if (res.data.status === 1) {
          this.$notify({
            title: '提示',
            message: '操作成功',
            type: 'success'
          })
          sessionStorage.setItem("userInfo", JSON.stringify(this.userInfo))
          this.isDis = true
        } else {
          this.$notify({
            title: '提示',
            message: res.data.message,
            type: 'error'
          });
        }
      })
    },
    renderTime(date) {
      let dates = new Date(date).toJSON();
      return new Date(+new Date(dates) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
    }
  }

}
</script>

<style lang="scss" scoped>
/* 卡片样式*/
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 100%;
}

/* 文本样式区*/
.name-role {
  font-size: 16px;
  padding: 5px;
  text-align: center;
}

.sender {
  text-align: center;
}

.register-info {
  text-align: center;
  padding-top: 10px;
}

.personal-relation {
  font-size: 16px;
  padding: 0px 5px 15px;
  margin-right: 1px;
  width: 100%
}

.relation-item {
  text-align: left;

}

.dialog-footer {
  padding-top: 10px;
  padding-left: 10%;
}

/*布局样式区*/
.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
